<!--https://www.datazzh.top-->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>在售内容</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap 样式 -->
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <!-- ECharts 库 -->
    <script src="/static/js/echarts.min.js"></script>
    <!-- 词云扩展 -->
    <script src="/static/js/echarts-wordcloud.min.js"></script>
    <script src="/static/js/papaparse.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    <style>
        body {
            background-color: #f8f9fa;
            padding: 20px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .dashboard-header {
            margin-top: 100px;
            margin-bottom: 30px;
        }

        .dashboard-title {
            font-size: 28px;
            font-weight: bold;
            color: #343a40;
            text-align: center;
            margin-bottom: 10px;
        }

        .dashboard-subtitle {
            text-align: center;
            color: #6c757d;
            margin-bottom: 30px;
        }

        .summary-box {
            background: linear-gradient(135deg, #4e73df, #224abe);
            color: white;
            padding: 25px;
            border-radius: 12px;
            margin-bottom: 30px;
            display: flex;
            justify-content: center;
            gap: 80px;
            align-items: center;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .summary-item {
            text-align: center;
            flex: 1;
        }

        .summary-label {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 8px;
        }

        .summary-value {
            font-size: 2.8rem;
            font-weight: 700;
            margin: 0;
        }

        .card {
            border: none;
            border-radius: 12px;
            margin-bottom: 25px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s, box-shadow 0.3s;
            overflow: hidden;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
        }

        .card-header {
            font-weight: 600;
            padding: 15px 20px;
            border-bottom: none;
        }

        .card-header.bg-primary {
            background: linear-gradient(135deg, #4e73df, #36b9cc);
            color: white;
        }

        .card-header.bg-info {
            background: linear-gradient(135deg, #36b9cc, #1abc9c);
            color: white;
        }

        .card-header.bg-warning {
            background: linear-gradient(135deg, #f6c23e, #f0932b);
            color: white;
        }

        .card-header.bg-secondary {
            background: linear-gradient(135deg, #54545f, #2c3e50);
            color: white;
        }

        .chart-container {
            width: 100%;
            height: 350px;
            padding: 15px;
        }

        .chart-wrapper {
            height: 100%;
            width: 100%;
        }

        @media (max-width: 992px) {
            .summary-box {
                flex-direction: column;
                gap: 30px;
                padding: 20px;
            }
        }

        @media (max-width: 768px) {
            .dashboard-title {
                font-size: 24px;
            }
            .summary-value {
                font-size: 2.2rem;
            }
            .chart-container {
                height: 300px;
            }
        }

        @media (max-width: 576px) {
            .summary-value {
                font-size: 1.8rem;
            }
            .chart-container {
                height: 250px;
            }
        }
        .waterfall-title {
            font-weight: bold;
            margin-bottom: 5px;
        }
        .waterfall-address {
            color: #6c757d;
            font-size: 0.9rem;
            margin-bottom: 10px;
        }
        .waterfall-price {
            font-size: 1.5rem;
            color: #ed1800;
        }
        .waterfall-unit-price {
            font-size: 0.8rem;
        }
        .waterfall-info {
            font-size: 0.85rem;
            color: #495057;
            margin-top: 10px;
        }
        #waterfallContainer {
            display: flex;
            flex-wrap: wrap;
            margin: 0 -10px; /* 调整外边距，以适应项目之间的间距 */
        }

        .waterfall-item {
            flex: 0 0 calc(33.333% - 20px); /* 计算每个项目的宽度为三分之一，减去间距 */
            margin: 10px;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 15px;
            background-color: white;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
            transition: transform 0.2s;
        }

        .waterfall-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        #citySelector {
            background-color: #fff;
            border: 2px solid #4e73df;
            border-radius: 25px;
            padding: 10px 20px;
            font-size: 16px;
            color: #343a40;
            margin-bottom: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            cursor: pointer;
            width: 100%;
            max-width: 350px;
            transition: all 0.3s;
        }

        #citySelector:focus {
            outline: none;
            border-color: #36b9cc;
            box-shadow: 0 0 0 3px rgba(54, 185, 204, 0.25);
        }

        #citySelector option {
            background-color: #f8f9fa;
            border-bottom: 1px solid #dee2e6;
            padding: 10px;
            color: #343a40;
            cursor: pointer;
        }

        #citySelector option:hover {
            background-color: #e9ecef;
        }

        #citySelector::-ms-expand {
            display: none;
        }

        .select-container {
            position: relative;
        }

        .select-container::after {
            content: "\25BC";
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
            font-size: 14px;
            color: #4e73df;
        }
    </style>
</head>

<body>
    <!--导航栏-->
    <nav class="navbar navbar-expand-lg fixed-top navbar-light bg-white" style="box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">
            <a href="../web/首页.html"><span style="color: #4e73df; font-weight: 700; font-size: 1.5rem;">房产数据可视化</span></a>
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item mx-2">
                    <a class="nav-link text-dark" href="#top10Chart">
                        <i class="bi bi-bar-chart me-1"></i>TOP10小区
                    </a>
                </li>
                <li class="nav-item mx-2">
                    <a class="nav-link text-dark" href="#attentionLine">
                        <i class="bi bi-graph-up me-1"></i>关注与发布
                    </a>
                </li>
                <li class="nav-item mx-2">
                    <a class="nav-link text-dark" href="#houseTypePie">
                        <i class="bi bi-grid me-1"></i>户型分布
                    </a>
                </li>
                <li class="nav-item mx-2">
                    <a class="nav-link text-dark" href="#roomCloud">
                        <i class="bi bi-cloud me-1"></i>室厅云图
                    </a>
                </li>
                <li class="nav-item mx-2">
                    <a class="nav-link text-dark" href="#floorBar">
                        <i class="bi bi-building me-1"></i>楼层分布
                    </a>
                </li>
                <li class="nav-item mx-2">
                    <a class="nav-link text-dark" href="#decorationBar">
                        <i class="bi bi-palette me-1"></i>装修情况
                    </a>
                </li>
                <li class="nav-item mx-2">
                    <a class="nav-link text-dark" href="#areaFunnel">
                        <i class="bi bi-ruler me-1"></i>面积户型
                    </a>
                </li>
                <li class="nav-item mx-2">
                    <a class="nav-link text-dark" href="#directionRadar">
                        <i class="bi bi-sun me-1"></i>朝向分类
                    </a>
                </li>
                <li class="nav-item mx-2">
                    <a class="nav-link text-dark" href="#totalPriceBar">
                        <i class="bi bi-currency-yen me-1"></i>总价区间
                    </a>
                </li>
                <li class="nav-item mx-2">
                    <a class="nav-link text-dark" href="#unitPriceBar">
                        <i class="bi bi-euro me-1"></i>单价区间
                    </a>
                </li>
                <li class="nav-item mx-2">
                    <a class="nav-link text-dark" href="#waterfallContainer">
                        <i class="bi bi-house me-1"></i>精选房源
                    </a>
                </li>
            </ul>
        </div>
    </div>
</nav>

    <!-- 页面标题 -->
    <div class="dashboard-header text-center">
        <h1 class="dashboard-title">粤港澳大湾区在售房源统计分析</h1>
        <p class="dashboard-subtitle">离线数据可视化分析</p>
    </div>

    <!-- 城市选择器 -->
    <div class="select-container">
    <select id="citySelector" class="form-select form-select-lg w-auto mx-auto" style="max-width: 300px;">
        <option value="">请选择城市</option>
        <option value="东莞">东莞</option>
        <option value="珠海">珠海</option>
        <option value="广州">广州</option>
        <option value="佛山">佛山</option>
        <option value="中山">中山</option>
        <option value="清远">清远</option>
        <option value="惠州">惠州</option>
        <option value="深圳">深圳</option>
        <option value="湛江">湛江</option>
        <option value="江门">江门</option>
    </select>
    </div>

    <!-- 顶部统计摘要 -->
    <div class="summary-box">
        <div class="summary-item">
            <div class="summary-label">平均总价</div>
            <div class="summary-value" id="avgTotalPrice">加载中...</div>
            <div class="summary-label">万元</div>
        </div>
        <div class="summary-item">
            <div class="summary-label">平均单价</div>
            <div class="summary-value" id="avgUnitPrice">加载中...</div>
            <div class="summary-label">元/㎡</div>
        </div>
    </div>

    <!-- 主内容容器 -->
    <div class="container-fluid">

        <!-- TOP10小区柱状折线图 & 关注与发布区间 -->
        <div class="row">
            <div class="col-lg-6 col-md-6">
                <div class="card">
                    <div class="card-header bg-primary">
                        <i class="bi bi-bar-chart me-2"></i>TOP10小区在售情况
                    </div>
                    <div class="chart-container">
                        <div class="chart-wrapper" id="top10Chart"></div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-6">
                <div class="card">
                    <div class="card-header bg-primary">
                        <i class="bi bi-graph-up me-2"></i>关注等级与发布区间
                    </div>
                    <div class="chart-container">
                        <div class="chart-wrapper" id="attentionLine"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 户型分布饼图 & 室/厅云图 -->
        <div class="row">
            <div class="col-lg-6 col-md-6">
                <div class="card">
                    <div class="card-header bg-info">
                        <i class="bi bi-grid me-2"></i>户型分布占比
                    </div>
                    <div class="chart-container">
                        <div class="chart-wrapper" id="houseTypePie"></div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-6">
                <div class="card">
                    <div class="card-header bg-warning">
                        <i class="bi bi-cloud me-2"></i>室厅分布云图
                    </div>
                    <div class="chart-container">
                        <div class="chart-wrapper" id="roomCloud"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 楼层/装修/面积/朝向图表 -->
        <div class="row">
            <div class="col-lg-3 col-md-6 col-sm-12">
                <div class="card">
                    <div class="card-header bg-secondary">
                        <i class="bi bi-building me-2"></i>楼层等级分布
                    </div>
                    <div class="chart-container">
                        <div class="chart-wrapper" id="floorBar"></div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-12">
                <div class="card">
                    <div class="card-header bg-secondary">
                        <i class="bi bi-palette me-2"></i>装修情况分布
                    </div>
                    <div class="chart-container">
                        <div class="chart-wrapper" id="decorationBar"></div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-12">
                <div class="card">
                    <div class="card-header bg-secondary">
                        <i class="bi bi-ruler me-2"></i>面积户型分布
                    </div>
                    <div class="chart-container">
                        <div class="chart-wrapper" id="areaFunnel"></div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-12">
                <div class="card">
                    <div class="card-header bg-secondary">
                        <i class="bi bi-sun me-2"></i>朝向分类分布
                    </div>
                    <div class="chart-container">
                        <div class="chart-wrapper" id="directionRadar"></div>
                    </div>
                </div>
            </div>
        </div>

        <!--区域分布        -->
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-12">
                <div class="card">
                    <div class="card-header bg-warning">
                        <i class="bi bi-cloud me-2"></i>区域分布云图
                    </div>
                    <div class="chart-container">
                        <div class="chart-wrapper" id="towncould"></div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-12">
                <div class="card">
                    <div class="card-header bg-info">
                        <i class="bi bi-currency-yen me-2"></i>总价区间分布
                    </div>
                    <div class="chart-container">
                        <div class="chart-wrapper" id="totalPriceBar"></div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-12">
                <div class="card">
                    <div class="card-header bg-warning">
                        <i class="bi bi-euro me-2"></i>单价区间分布
                    </div>
                    <div class="chart-container">
                        <div class="chart-wrapper" id="unitPriceBar"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 瀑布式房源列表 -->
        <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header bg-primary">
                        <i class="bi bi-house me-2"></i>精选房源列表
                    </div>
                    <div class="card-body">
                        <div class="row" id="waterfallContainer">
                            <!-- 瀑布流内容将通过JS动态生成 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>



    </div>

    <script>
        // 全局变量存储图表实例
        let charts = [];
        let currentCityData = null;

        // 初始化所有图表
        async function initCharts(cityData) {
            try {
                // 更新平均总价和平均单价的显示
                document.getElementById('avgTotalPrice').textContent = `${cityData['平均总价（万）'].toFixed(2)}`;
                document.getElementById('avgUnitPrice').textContent = `${cityData['平均单价（元/㎡）'].toFixed(2)}`;

                // 销毁之前创建的所有图表实例
                charts.forEach(chart => chart.dispose());
                charts = [];

                // 初始化TOP10小区图表（柱状+折线）
                const top10Chart = echarts.init(document.getElementById('top10Chart'));
                top10Chart.setOption({
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        },
                        formatter: function (params) {
                            let result = params[0].name + '<br/>';
                            params.forEach(param => {
                                result += param.marker + ' ' + param.seriesName + ': ' + param.value + '<br/>';
                            });
                            return result;
                        }
                    },
                    legend: {
                        data: ['在售数量', '平均总价（万）', '平均单价（元/㎡）'],
                        top: 10,
                        right: 20
                    },
                    xAxis: {
                        type: 'category',
                        data: cityData.top10小区.map(item => item['小区名称']),
                        axisLabel: {
                            rotate: 45,
                            interval: 0,
                            fontSize: 12
                        }
                    },
                    yAxis: [
                        {
                            type: 'value',
                            name: '在售数量',
                            position: 'left',
                            axisLabel: { fontSize: 11 }
                        },
                        {
                            type: 'value',
                            name: '价格（万/元）',
                            position: 'right',
                            axisLabel: { fontSize: 11 }
                        }
                    ],
                    series: [
                        {
                            name: '在售数量',
                            type: 'bar',
                            data: cityData.top10小区.map(item => item['在售数量']),
                            barWidth: '40%',
                            itemStyle: { color: '#4e73df' }
                        },
                        {
                            name: '平均总价（万）',
                            type: 'line',
                            yAxisIndex: 1,
                            data: cityData.top10小区.map(item => item['平均总价（万）']),
                            itemStyle: { color: '#ff6384' },
                            smooth: true
                        },
                        {
                            name: '平均单价（元/㎡）',
                            type: 'line',
                            yAxisIndex: 1,
                            data: cityData.top10小区.map(item => item['平均单价（元/㎡）']),
                            itemStyle: { color: '#36a2eb' },
                            smooth: true
                        }
                    ]
                });

                charts.push(top10Chart);

                // 初始化户型分布饼图
                const houseTypePie = echarts.init(document.getElementById('houseTypePie'));
                const houseTypeData = Object.entries(cityData.户型).map(([name, value]) => ({
                    name, value
                }));
                houseTypePie.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}: {c}套 ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        right: 0,
                        top: 'center',
                        textStyle: { fontSize: 11 }
                    },
                    series: [{
                        type: 'pie',
                        radius: ['45%', '70%'],
                        center: ['45%', '50%'],
                        avoidLabelOverlap: false,
                        label: { show: false },
                        emphasis: {
                            label: { show: true, fontSize: '12', fontWeight: 'bold' }
                        },
                        labelLine: { show: false },
                        data: houseTypeData
                    }]
                });

                charts.push(houseTypePie);

                // 初始化室厅云图
                const roomCloud = echarts.init(document.getElementById('roomCloud'));
                const roomData = [
                    ...Object.entries(cityData.室).map(([k, v]) => ({ name: `${k}室`, value: v })),
                    ...Object.entries(cityData.厅).map(([k, v]) => ({ name: `${k}厅`, value: v }))
                ];
                roomCloud.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}: {c}套'
                    },
                    series: [{
                        type: 'wordCloud',
                        shape: 'circle',
                        width: '100%',
                        height: '100%',
                        gridSize: 16,
                        sizeRange: [14, 36],
                        rotationRange: [-45, 45],
                        rotationStep: 15,
                        textStyle: {
                            fontFamily: 'Microsoft YaHei',
                            fontWeight: 'bold',
                            color: function () {
                                return `hsl(${Math.random() * 360}, 70%, 50%)`;
                            }
                        },
                        data: roomData
                    }]
                });

                charts.push(roomCloud);

                // 楼层等级柱状图
                const floorBar = echarts.init(document.getElementById('floorBar'));
                const floorData = Object.entries(cityData.楼层等级);
                floorBar.setOption({
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: '{b}: {c}套'
                    },
                    xAxis: {
                        type: 'category',
                        data: floorData.map(item => item[0]),
                        axisLabel: { fontSize: 11 }
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: { fontSize: 11 }
                    },
                    series: [{
                        type: 'bar',
                        data: floorData.map(item => item[1]),
                        itemStyle: {
                            color: (params) => {
                                const colors = ['#4e73df', '#36b9cc', '#f6c23e', '#e74a3b'];
                                return colors[params.dataIndex % colors.length];
                            },
                            borderRadius: [6, 6, 0, 0]
                        },
                        barWidth: '50%'
                    }]
                });

                charts.push(floorBar);

                // 装修情况柱状图
                const decorationBar = echarts.init(document.getElementById('decorationBar'));
                const decorationData = Object.entries(cityData.装修情况);
                decorationBar.setOption({
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: '{b}: {c}套'
                    },
                    xAxis: {
                        type: 'category',
                        data: decorationData.map(item => item[0]),
                        axisLabel: { fontSize: 11 }
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: { fontSize: 11 }
                    },
                    series: [{
                        type: 'bar',
                        data: decorationData.map(item => item[1]),
                        itemStyle: {
                            color: (params) => {
                                const colors = ['#4e73df', '#36b9cc', '#f6c23e', '#e74a3b'];
                                return colors[params.dataIndex % colors.length];
                            },
                            borderRadius: [6, 6, 0, 0]
                        },
                        barWidth: '50%'
                    }]
                });

                charts.push(decorationBar);

                // 面积户型漏斗图
                const areaFunnel = echarts.init(document.getElementById('areaFunnel'));
                const areaData = Object.entries(cityData.面积户型).map(([name, value]) => ({
                    value, name
                }));
                areaFunnel.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}: {c}套'
                    },
                    series: [{
                        type: 'funnel',
                        sort: 'descending',
                        gap: 0,
                        label: {
                            show: true,
                            position: 'inside',
                            fontSize: 11
                        },
                        emphasis: { label: { fontSize: 14 } },
                        data: areaData
                    }]
                });

                charts.push(areaFunnel);

                // 朝向分类雷达图
                const directionRadar = echarts.init(document.getElementById('directionRadar'));
                const directionData = Object.entries(cityData.朝向分类);
                directionRadar.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}: {c}套'
                    },
                    radar: {
                        indicator: directionData.map(item => ({ name: item[0], max: Math.max(...directionData.map(d => d[1])) * 1.2 })),
                        radius: '65%',
                        splitNumber: 5,
                        axisName: { fontSize: 11 }
                    },
                    series: [{
                        type: 'radar',
                        areaStyle: { opacity: 0.2 },
                        lineStyle: { width: 2 },
                        data: [{
                            value: directionData.map(item => item[1]),
                            name: '朝向分布'
                        }]
                    }]
                });

                charts.push(directionRadar);

                // 关注与发布区间图表
                const customfabu = ['半年以上发布', '近六个月发布', '近三个月发布','近一个月发布'];
                const attentionLine = echarts.init(document.getElementById('attentionLine'));
                const scatterData = customfabu.map(qujian => {
                    const value = cityData.发布区间[qujian] || 0;
                    return { name: qujian, value };
                });
                attentionLine.setOption({
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        },
                        formatter: function (params) {
                            let result = params[0].name + '<br/>';
                            params.forEach(param => {
                                result += param.marker + ' ' + param.seriesName + ': ' + param.value + '<br/>';
                            });
                            return result;
                        }
                    },
                    legend: {
                        data: ['关注数', '发布数'],
                        top: 10,
                        right: 20
                    },
                    xAxis: {
                        type: 'category',
                        data: scatterData.map(item => item.name),
                        axisLabel: { rotate: 30, fontSize: 11 }
                    },
                    yAxis: [
                        {
                            type: 'value',
                            name: '关注数',
                            position: 'left',
                            axisLabel: { fontSize: 11 }
                        },
                        {
                            type: 'value',
                            name: '发布数',
                            position: 'right',
                            axisLabel: { fontSize: 11 }
                        }
                    ],
                    series: [
                        {
                            name: '关注数',
                            type: 'bar',
                            data: scatterData.map(item => item.value),
                            barWidth: '40%',
                            itemStyle: { color: '#4e73df' }
                        },
                        {
                            name: '发布数',
                            type: 'line',
                            yAxisIndex: 1,
                            data: scatterData.map(item => item.value),
                            symbol: 'circle',
                            symbolSize: 6,
                            itemStyle: { color: '#ea311b' },
                            lineStyle: { width: 2 }
                        }
                    ]
                });

                charts.push(attentionLine);

                // 总价区间柱状图
                const totalPriceBar = echarts.init(document.getElementById('totalPriceBar'));
                const totalPriceData = Object.entries(cityData.总价区间);
                totalPriceBar.setOption({
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: '{b}: {c}套'
                    },
                    xAxis: {
                        type: 'category',
                        data: totalPriceData.map(item => item[0]),
                        axisLabel: { rotate: 20, fontSize: 11 }
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: { fontSize: 11 }
                    },
                    series: [{
                        type: 'bar',
                        data: totalPriceData.map(item => item[1]),
                        barWidth: '50%',
                        itemStyle: { color: '#4e73df' }
                    }]
                });

                charts.push(totalPriceBar);

                // 单价区间柱状图
                const unitPriceBar = echarts.init(document.getElementById('unitPriceBar'));
                const unitPriceData = Object.entries(cityData.单价区间);
                unitPriceBar.setOption({
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: '{b}: {c}套'
                    },
                    xAxis: {
                        type: 'category',
                        data: unitPriceData.map(item => item[0]),
                        axisLabel: { rotate: 20, fontSize: 11 }
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: { fontSize: 11 }
                    },
                    series: [{
                        type: 'bar',
                        data: unitPriceData.map(item => item[1]),
                        barWidth: '50%',
                        itemStyle: { color: '#36b9cc' }
                    }]
                });

                charts.push(unitPriceBar);


                //
                const chart9 = echarts.init(document.getElementById('towncould'));
                const towndata = Object.entries(cityData.区域).map(([k, v]) => ({
                  name: `${k}`,
                  value: v
                }));

                const option8 = {
                  tooltip: {
                    trigger: 'item',
                    formatter: '{b}: {c}套'
                  },
                  series: [{
                    type: 'wordCloud',
                    shape: 'circle',
                    width: '100%',
                    height: '100%',
                    gridSize: 10,
                    sizeRange: [14, 60],
                    rotationRange: [0, 90], // 修正旋转范围
                    rotationStep: 15,
                    textStyle: {
                      fontFamily: 'Microsoft YaHei',
                      fontWeight: 'bold',
                      color: function () {
                        return `hsl(${Math.random() * 360}, 70%, 50%)`;
                      }
                    },
                    data: towndata
                  }]
                };

                // 使用正确的实例变量名设置选项
                chart9.setOption(option8);

                // 添加窗口大小调整事件监听器
                window.addEventListener('resize', () => {
                    charts.forEach(chart => chart.resize());
                });
            } catch (error) {
                console.error('初始化图表时出错:', error);
                alert('图表初始化失败，请刷新页面重试');
            }
        }

        // 加载城市数据
        async function loadCityData(cityName) {
            try {
                const response = await fetch(`../data/zs/在售分类/${cityName}_在售分类统计结果.json`);
                if (!response.ok) {
                    throw new Error('网络响应异常');
                }
                return await response.json();
            } catch (error) {
                console.error(`加载 ${cityName} 数据时出错:`, error);
                alert(`加载 ${cityName} 数据失败，请稍后重试`);
                throw error;
            }
        }

        // 城市选择事件监听器
        document.getElementById('citySelector').addEventListener('change', async function () {
            const selectedCity = this.value;
            if (selectedCity) {
                try {
                    // 显示加载状态
                    document.getElementById('avgTotalPrice').textContent = '加载中...';
                    document.getElementById('avgUnitPrice').textContent = '加载中...';

                    // 加载选中城市的数据
                    const cityData = await loadCityData(selectedCity);
                    currentCityData = cityData;

                    // 初始化图表
                    initCharts(cityData);
                    // 加载房源数据并渲染瀑布流
                    const housingData = await loadHousingData(selectedCity);
                    renderWaterfallList(housingData);

                    // 更新全局变量
                    currentCityData = {
                        ...currentCityData,
                        housingData: housingData
                    };

                } catch (error) {
                    console.error('加载数据时出错:', error);
                }
            }
        });

        // 初始加载默认城市数据（例如：东莞）
        window.addEventListener('load', async function () {
            try {
                const initialCity = '东莞';
                document.getElementById('citySelector').value = initialCity;
                // 加载东莞的数据
                const cityData = await loadCityData(initialCity);
                currentCityData = cityData;
                await initCharts(cityData);

                // 加载东莞的房源数据
                const housingData = await loadHousingData(initialCity);
                renderWaterfallList(housingData);

            } catch (error) {
                console.error('加载初始数据时出错:', error);
                alert('数据加载失败，请刷新页面重试');
            }
        });

        // 加载房源数据
        async function loadHousingData(cityName) {
            try {
                // 根据城市名称构造 CSV 文件路径
                const csvFilePath = `../data/zs/top50/二手房_${cityName}_TOP50.csv`;
                const response = await fetch(csvFilePath);
                const csvText = await response.text();
                console.log('获取到的 CSV 内容:', csvText);
                const parsedData = Papa.parse(csvText, { header: true, dynamicTyping: true });
                return parsedData.data;
            } catch (error) {
                console.error('加载房源数据出错:', error);
                return [];
            }
        }
        // 渲染瀑布流房源列表
        function renderWaterfallList(housingData) {
        const container = document.getElementById('waterfallContainer');
        container.innerHTML = '';

        for (let i = 0; i < 50; i++) {
            const house = housingData[i];
            const item = document.createElement('div');
            item.className = 'waterfall-item';
            item.innerHTML = `
                <div class="waterfall-title">${house.标题}</div>
                <div class="waterfall-address">${house.小区名称} - ${house.区域}</div>
                <div class="waterfall-price">${house.总价}</div>
                <div class="waterfall-unit-price">${house.单价}元/㎡</div>
                <div class="waterfall-info">
                    ${house.户型} | ${house.面积}㎡ | ${house.朝向} | ${house.楼层}
                </div>
                <div class="watchers-container">
                    <span class="watchers-icon">⭐</span>
                    <span class="watchers-count">${house.关注人数}</span>
                </div>
            `;
            container.appendChild(item);
        }
}

    </script>

</body>

</html>